<template>
    <div>
        <div id="main" style="width: 600px;height: 400px;margin-left: 200px" align="center"></div>
    </div>
</template>

<script>
    export default {
        name: "Echars",
        data(){
            return{

            }
        },methods:{
            inniEchars(){
                var myChart =this.$echarts.init(document.getElementById('main'));

                    this.getRequest('/aticle/echarsByName').then(resp=>{
                        if(resp) {
                            let cateArr = [];
                            let counts = [];
                            let datas=JSON.parse(JSON.stringify(resp).replace(/catename/g, 'name'));
                            datas=JSON.parse(JSON.stringify(datas).replace(/counts/g, 'value'));
                            resp.forEach((item,i)=>{
                                cateArr.push(item.catename);
                                counts.push(item.counts);
                            })
                            // 绘制图表
                            myChart.setOption({
                                // title: {
                                //     text: '栏目文章数量'
                                // },
                                // tooltip: {},
                                // legend: {
                                //     data:['数量']
                                // },
                                // xAxis: {
                                //     data: cateArr
                                // },
                                // yAxis: {},
                                // series: [{
                                //     name: '数量',
                                //     type: 'bar',
                                //     data: counts
                                // }]
                                backgroundColor: '#d0d0d0',//#AAAAFF

                                title: {
                                    text: '栏目文章数量',
                                    left: 'center',
                                    top: 20,
                                    textStyle: {
                                        color: 'red'
                                    }
                                },

                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                },

                                visualMap: {
                                    show: false,
                                    min: 0,
                                    max: 20,
                                    inRange: {
                                        colorLightness: [0, 1]
                                    }
                                },
                                series: [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '50%'],
                                        data:datas.sort(function (a, b) { return a.value - b.value; }),
                                        roseType: 'radius',
                                        label: {
                                            color: 'rgba(0, 0, 0, 0.8)'
                                        },
                                        labelLine: {
                                            lineStyle: {
                                                color: 'rgba(0, 0, 0, 0.3)'
                                            },
                                            smooth: 0.2,
                                            length: 10,
                                            length2: 20
                                        },
                                        itemStyle: {
                                            color: '#FFF7FF',
                                            shadowBlur: 80,
                                            shadowColor: 'rgba(0, 0, 50, 5)'
                                        },

                                        animationType: 'scale',
                                        animationEasing: 'elasticOut',
                                        animationDelay: function (idx) {
                                            return Math.random() * 200;
                                        }
                                    }
                                ]
                            });
                        }

                    })


            }
        },mounted() {
            this.inniEchars();
        }
    }
</script>

<style scoped>

</style>